<template>
    <div>
        <div class="content">
            <vxe-form :data="formData" :items="formItems" :rules="rules" titleColon> </vxe-form>
        </div>
        <el-card style="overflow: auto">
            <el-tabs v-model="activeName">
                <el-tab-pane label="beforeEditMethod" name="beforeEditMethod">
                    <monaco-editor v-model="formData.beforeEditMethod" :height="paneHeight" language="javascript" />
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from "vue";
    import { MonacoEditor } from "@/components/MonacoEditor";
    import { editFormDataDefault } from "./propsDefault";
    const activeName = ref("beforeEditMethod");
    const paneHeight = ref(document.documentElement.scrollHeight - 480 + "px");
    defineProps({
        formData: {
            type: Object,
            default: editFormDataDefault,
        },
    });
    // 表单校验
    const rules = ref({
        name: [{ required: true, message: "请输入表名称" }],
    });

    const formItems = reactive([
        {
            field: "trigger",
            title: "触发方式",
            span: 4,
            itemRender: {
                name: "$select",
                options: [
                    { value: "manual", label: "手动触发" },
                    { value: "click", label: "点击触发" },
                    { value: "dblclick", label: "双击触发" },
                ],
                props: { placeholder: "请选择" },
            },
        },
        {
            field: "enabled",
            title: "是否启用",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "mode",
            title: "编辑模式",
            span: 4,
            itemRender: {
                name: "$select",
                options: [
                    { value: "cell", label: "单元格编辑" },
                    { value: "row", label: "行编辑" },
                ],
                props: { placeholder: "请选择" },
            },
        },
        {
            field: "showIcon",
            title: "是否显示列头编辑图标",
            span: 6,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "showStatus",
            title: "是否显示单元格新增与修改状态",
            span: 6,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "showUpdateStatus",
            title: "是否显示单元格修改状态",
            span: 6,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "showInsertStatus",
            title: "是否显示单元格新增状态",
            span: 6,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "showAsterisk",
            title: "是否显示必填字段的红色星号",
            span: 6,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "autoClear",
            title: "是否自动清除单元格的激活状态",
            span: 6,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        { field: "icon", title: "自定义可编辑列的状态图标", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "remark", title: "备注", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
    ]);
</script>
<style scoped>
    .content {
        padding: 10px;
        box-shadow: var(--el-box-shadow-light);
        border-radius: var(--el-card-border-radius);
        border: 1px solid var(--el-card-border-color);
        background-color: var(--el-card-bg-color);
        overflow: hidden;
        color: var(--el-text-color-primary);
        transition: var(--el-transition-duration);
    }
</style>
